<template>
  <div class="min-item">
      <div class="item" v-if="flight">
        <el-row type="flex" justify="center" class="flight-mes" :gutter="30"  @click.native="showPrice">
          <el-col :span="6" class="flight-number">{{flight.airline_name}} {{flight.flight_no}}</el-col>
          <el-col :span="4" class="timeAndPlace">
              <span class="time">{{flight.dep_time}}</span>
              <span class="terminal">{{flight.org_airport_name}}{{flight.org_airport_quay}}</span>
          </el-col>
          <el-col :span="2" class="duration" >
              <div class="D-time">{{rankTime}}</div>
              <div class="line"></div>
          </el-col>
          <el-col :span="4" class="timeAndPlace">
              <span class="time">{{flight.arr_time}}</span>
              <span class="terminal">{{flight.dst_airport_name}}{{flight.dst_airport_quay}}</span>
          </el-col>
          <el-col :span="6" class="price">
              ￥<span class="price-number">{{flight.base_price /2}}</span> 起
            </el-col>
        </el-row>
        <div  v-if="isShowPrice">
            <el-row type="flex" class="discount-mes" :gutter="0" v-for="(item1, index) in flight.seat_infos " :key="index" >
                <el-col :span="5">低价推荐</el-col>
                <el-col :span="11" class="flight-agency"><span class="seat">{{item1.group_name}}</span> |{{item1.supplierName}}</el-col>
                <el-col :span="3" class="price">￥{{item1.org_settle_price}}</el-col>
                <el-col :span="5"  class="select-btn">
                    <el-button size="small" @click.native="changeToOrder(item1)">选定</el-button>
                    <div class="rest-ticket">剩余：{{item1.discount}}</div>
                </el-col>
            </el-row>
        </div>
      </div>
      <div v-else class="noItem">
        没有该行程信息
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    flight: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      isShowPrice: false
    }
  },
  created () {
  },
  methods: {
    showPrice () {
      this.isShowPrice = !this.isShowPrice
    },
    changeToOrder (item) {
      console.log(item)
      this.$router.push({
        path: '/plane/order',
        query: {
          id: this.flight.id,
          seat_xid: item.seat_xid
        }
      })
    }
  },
  mounted () {

  },
  watch: {
  },
  computed: {
    rankTime () {
      const arrT = this.flight.arr_time.split(':')
      const depT = this.flight.dep_time.split(':')
      if (depT[0] > arrT[0]) {
        arrT[0] = arrT[0] + 24
      }
      const diffMin = (arrT[0] * 60 + +arrT[1]) - (depT[0] * 60 + +depT[1])
      const Hour = Math.floor(diffMin / 60)
      const Min = diffMin % 60
      const dtime = `${Hour}时${Min}分`
      return dtime
    }
  }
}
</script>

<style scoped lang="less">
.min-item{
    width: 700px;
    text-align: center;
    margin-bottom: 20px;
    .item{
        border: 1px solid #eee;
        margin-top: 15px;
        /deep/.flight-mes{
            height: 100px;
            .flight-number{
                line-height: 100px;
            }
            .timeAndPlace{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                .time{
                    font-size: 20px;
                }
                .terminal{
                    font-size: 10px;
                    color: rgb(204, 204, 204);
                }
            }
            .duration{
                line-height: 100px;
                position: relative;
                .D-time{
                    font-size: 13px;
                    color:rgb(190, 186, 186) ;
                    position: absolute;
                    left: 5px;
                }
                .line{
                    position: absolute;
                    width: 60px;
                    height: 1px;
                    top: 50%;
                    left: 0%;
                    transform: translate( 3px , 15px);
                    content: ' ';
                    background-color: rgb(230, 227, 227);
                }
            }
            .price{
                line-height: 100px;
                font-size: 18px;
                .price-number{
                    font-size: 25px;
                    color: orange;
                }
            }
        }
        .discount-mes{
            padding: 0 0  10px  30px;
            text-align: left;
            font-size: 14px;
            background-color: #eee;
            height: 80px;
            line-height: 80px;
            .price{
                color: orange;
                font-size: 20px;
            }
            .flight-agency{
                font-size: 12px;
                .seat{
                    color: green;
                }
            }
            .select-btn{
                position: relative;
                .el-button{
                    position: absolute;
                    left: 40px;
                    top: 20px;
                    background-color: orange;
                    color: #fff;
                    cursor: pointer;
                    z-index: 2;
                }
                .rest-ticket{
                    position: absolute;
                    left: 43px;
                    top: 25px;
                    font-size: 11px;
                    height: 30px;
                    text-align: center;
                }
            }
        }
      .noItem{
        width: 100px;
        height: ;
      }
    }

}
</style>
